<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预警消息管理</title>
    <!-- CSS -->
    <link href="assets/css/fonts/fontawesome/all.min.css" rel="stylesheet">
    <link href="assets/css/fonts/beid.css" rel="stylesheet">

    <link href="assets/css/main.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">

    <!-- JQVMAP -->
    <link href="assets/plugins/jqvmap/jqvmap.min.css" rel="stylesheet">

    <!-- dateRangePicker -->
    <link href="assets/plugins/daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Favicons -->
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
    <link rel="icon" href="assets/img/favicon.png">

    <!-- Fonts -->
    <link href="assets/fonts/inter/inter.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i"
          rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
          rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body class="body">

<!-- header -->
<header class="main-header">
    <!-- nav -->
    <nav class="main-navbar navbar navbar-expand-lg navbar-light shadow-2">
        <div class="lnav-box d-flex">
            <div class="logo-wrapper px-3 d-none d-md-flex">
                <img src="assets/img/logo.png" alt="Logo">
            </div>
            <div class="sidebar-toggler-wrapper ml-auto">
                <button class="p-collapsing-sidebar-toggler sidebar-toggler-secondary transition rounded-circle"
                        data-collapsing="partially" data-collapsing-target="#adminNav" type="button">
                    <span class="icon-menu-options"></span>
                </button>
            </div>
        </div>
        <div class="d-none d-lg-block ml-0 mr-auto pl-4">

        </div>
        <div class="pr-6">
            <ul class="nav sec-nav navbar-nav flex-row">

                <li class="user-item nav-item dropdown">
                    <a class="user-link nav-link d-inline-flex align-items-center h-100 small-1 pl-1 pl-sm-3 pr-0"
                       href="#" id="dropdownAdmin_02" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <img class="rounded-circle Avatar-rounded-circle" src="./assets/img/user.png" alt="" style="position: absolute;top: 4px;left: -35px;border: none;width: 38px;height: 38px;border: 2px solid;">
                        <div class="d-none d-sm-block lh-1">
                            <div class="lh-5">张三</div>
                            <span class="small-3"><i class="fas fa-circle text-warning small-5"></i> 在线</span>
                        </div>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right shadow-1 py-3 position-absolute mt-2"
                         aria-labelledby="dropdownAdmin">

                        <a class="dropdown-item" href="#"><span class="icon-power-on-buton mr-2"></span>退出</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.nav -->
</header>
<!-- /.header -->

<!-- main -->
<main>
    <!-- sidebar -->
    <nav id="adminNav" class="main-sidebar p-collapsing-sidebar sidebar-fixed sidebar-left d-flex flex-column">
        <div class="main-sidebar-inner" data-scrollbar="sidebar">
            <ul class="sidebar-nav sidebar-nav-light-hover list-unstyled text-unset small-3 fw-600 content-list">
                <li class="nav-item text-light transition">
                    <a href="atlas.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-desktop"></i> <span class="p-collapsing-title">知识图谱</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="warning.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-exclamation-circle"></i> <span class="p-collapsing-title">智能预警</span>
                    </a>
                </li>

                <li class="nav-item-now text-light transition">
                    <a href="message-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-chart-bar"></i> <span class="p-collapsing-title">预警消息管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="document-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="fas fa-file-contract"></i> <span class="p-collapsing-title">预案管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a href="corpus-management.html" style="height: 52.5px;padding: 12px 16px 12px 16px;"
                       class="nav-link nav-link-border">
                        <i class="icon-menu-grid"></i> <span class="p-collapsing-title">语料库管理</span>
                    </a>
                </li>

                <li class="nav-item text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-sticky-note"></i> <span class="p-collapsing-title">组织架构管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-management.html" class="p-collapsing-title nav-link">
                                    <span>用户管理</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="organization-management.html" class="p-collapsing-title nav-link">
                                    <span>组织管理</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>

                <li class="nav-item text-light transition">
                    <a aria-expanded="false" data-toggle="collapse"
                       class="sbr-collapse nav-link nav-link-border collapser collapser-active open">
                        <i class="far fa-clone"></i> <span class="p-collapsing-title">日志管理</span>
                    </a>
                    <div class="collapse nav-collapse collapse show">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="user-log.html" class="p-collapsing-title nav-link">
                                    <span>用户登录记录</span>
                                </a>
                            </li>

                            <li class="nav-item">
                                <a href="operation-log.html" class="p-collapsing-title nav-link">
                                    <span>操作记录</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /.sidebar -->

    <!-- main content -->
    <div class="main-container">
        <div class="overflow-hidden">
            <div id="dashboard">
                <div id="charts" class="page-content-fl">
                    <div class="d-flex align-items-center px-6 py-5">
                        <div class="text-light mr-auto">
                            <h2 class="fw-100 mb-0">预警消息管理</h2>
                            <span class="lead-1 text-info">Message management</span>
                        </div>
                    </div>

                    <div class="container-fluid p-0">
                        <div class="row panel-row panel-top-line">
                            <!--消息列表-->
                            <div class="main1">
                                <ul class="panel-list-sc list-unstyled mt-3 mb-0" data-scrollbar="scroll">

                                    <li class="panel-list-sc-item">
                                        <div class="d-flex">
                                            <div class="text-warning"><i class="fas fa-align-right"></i></div>
                                            <div class="ml-3 pr-4 pr-lg-6">
                                                <h5 class="button-container">
                                                    市气象局
                                                    <div class="button-group">
                                                        <button class="button more" type="button" data-toggle="collapse" id="edit"
                                                                data-target="#demo">编辑
                                                        </button>
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">删除
                                                        </button>

                                                        <!--点击编辑弹窗-->
                                                        <div id="edit-popup" class="panel-col col-xl-6">
                                                            <div class="panel">
                                                                <!--×－-->
                                                                <header class="panel-header align-items-center">
                                                                    <div>
                                                                        <h3 class="title mb-0">修改语句</h3>
                                                                    </div>
                                                                    <div class="panel-header-nav ml-auto">
                                                                        <a class="nav-item">
                                                                            <span class="icon-close"></span>
                                                                        </a>
                                                                    </div>
                                                                </header>

                                                                <!--组件-->
                                                                <div class="position-relative my-2">
                                                                    <form class="input-transparent">

                                                                        <div class="mt-5">
                                                                            <div class="form-group">
                                                                                <textarea class="form-control" rows="3" id="textarea" placeholder=""></textarea>
                                                                            </div>
                                                                        </div>

                                                                        <div class="btn-section pl-4 pl-md-6 d-flex justify-content-center">
                                                                            <a href="#"
                                                                               class="my-3 mx-1 btn btn-outline-theme">确定</a>
                                                                            <a href="#"
                                                                               class="my-3 mx-1 btn btn-outline-danger">取消</a>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </h5>
                                                <p class="mb-0 emergencyPlan">建德市当前风速超过安全范围，请做好防护。</p>
                                                <a class="date">2023.11.23 / 20:19</a>

                                            </div>
                                        </div>
                                    </li>
                                    <hr>
                                    <li class="panel-list-sc-item">
                                        <div class="d-flex">
                                            <div class="text-warning"><i class="fas fa-align-right"></i></div>
                                            <div class="ml-3 pr-4 pr-lg-6">
                                                <h5 class="button-container">
                                                    市规划和自然资源局
                                                    <div class="button-group">
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">编辑
                                                        </button>
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">删除
                                                        </button>
                                                    </div>
                                                </h5>
                                                <p class="mb-0">建德市当前有台风风险，请注意！
                                                    <a class="date">2023.11.21 / 07:39</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>

                                    <hr>
                                    <li class="panel-list-sc-item">
                                        <div class="d-flex">
                                            <div class="text-warning"><i class="fas fa-align-right"></i></div>
                                            <div class="ml-3 pr-4 pr-lg-6">
                                                <h5 class="button-container">
                                                    市林业局
                                                    <div class="button-group">
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">编辑
                                                        </button>
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">删除
                                                        </button>
                                                    </div>

                                                </h5>
                                                <p class="mb-0">建德市下涯镇，气象台发布大雾预警，能见度将明显降低，请驾驶员减速慢行，确保行车安全。
                                                    <a class="date">2023.11.20 / 18:26</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                    <hr>

                                    <li class="panel-list-sc-item">
                                        <div class="d-flex">
                                            <div class="text-warning"><i class="fas fa-align-right"></i></div>
                                            <div class="ml-3 pr-4 pr-lg-6">
                                                <h5 class="button-container">
                                                    市卫生健康局
                                                    <div class="button-group">
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">编辑
                                                        </button>
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">删除
                                                        </button>
                                                    </div>

                                                </h5>
                                                <p class="mb-0">建德市下涯镇，气象台发布大雾预警，能见度将明显降低，请驾驶员减速慢行，确保行车安全。
                                                    <a class="date">2023.11.19 / 19:49</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                    <hr>

                                    <li class="panel-list-sc-item">
                                        <div class="d-flex">
                                            <div class="text-warning"><i class="fas fa-align-right"></i></div>
                                            <div class="ml-3 pr-4 pr-lg-6">
                                                <h5 class="button-container">
                                                    市水利局
                                                    <div class="button-group">
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">编辑
                                                        </button>
                                                        <button class="button more" type="button" data-toggle="collapse"
                                                                data-target="#demo">删除
                                                        </button>
                                                    </div>

                                                </h5>
                                                <p class="mb-0">建德市莲花镇，降雨量接连攀升，请务必提前做好准备。
                                                    <a class="date">2023.11.19 / 19:19</a>
                                                </p>
                                            </div>
                                        </div>
                                    </li>
                                    <hr>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- footer -->
        <footer id="footer" class="footer">
            <div class="container-fluid">
                <div class="row gutters-y align-items-center">
                    <div class="col-md-6 col-lg-5">

                    </div>
                    <div class="col-md-6 col-lg-7 order-lg-last d-none d-md-block">
                        <div class="nav nav-bold-style justify-content-end text-uppercase px-2">
                            <a class="nav-link" href="#">用户须知</a>
                            <a class="nav-link" href="#">使用指南</a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- /.footer -->
    </div>
</main>
<!-- /.main -->

<!-- offcanvas - search -->
<!--<div id="offcanvas-search" class="offcanvas h-100 py-8" data-animation="fadeDown" data-scrollbar="offcanvas">-->
<!--    <div class="row">-->
<!--        <div class="col-sm-1 order-sm-last">-->
<!--            <button type="button" data-toggle="offcanvas-close"-->
<!--                    class="close float-right mr-lg-6 text-light o-1 lead-2 fw-100" data-dismiss="offcanvas"-->
<!--                    aria-label="Close">-->
<!--                <span aria-hidden="true" class="icon-close"></span>-->
<!--            </button>-->
<!--        </div>-->
<!--        <form class="col-sm-11 col-lg-10 mx-auto input-rounded form-inline position-relative w-100 mt-0">-->
<!--            <div class="input-group bg-none border-0 w-100">-->
<!--                <input class="form-control form-control-lg rounded-0 bg-none pl-0 h-auto fs-6 display-md-4 display-xl-2 fw-600"-->
<!--                       type="text" aria-label="Search" placeholder="Search for...">-->
<!--            </div>-->
<!--            <hr class="w-100 o-25 border-white mt-0">-->
<!--            <div class="row gutters-y w-100">-->
<!--                <div class="col-lg-3">-->
<!--                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Categories-->
<!--                    </h5>-->
<!--                    <ul class="list-unstyled pl-4">-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Architecture</strong> (800)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Art & Illustration</strong> (317)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Culture & Education</strong> (672)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-0">-->
<!--                            <a href="#" class="tag-item"><strong>E-Commerce</strong> (272)</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="col-lg-3">-->
<!--                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Tags</h5>-->
<!--                    <ul class="list-unstyled pl-4">-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>360</strong> (128)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>3D</strong> (42)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Animation</strong> (4105)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-0">-->
<!--                            <a href="#" class="tag-item"><strong>Apps</strong> (319)</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="col-lg-3">-->
<!--                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Technologies-->
<!--                    </h5>-->
<!--                    <ul class="list-unstyled pl-4">-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>AngularJS</strong> (629)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Apache</strong> (241)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Bootstrap</strong> (751)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>CloudFire</strong> (209)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-0">-->
<!--                            <a href="#" class="tag-item"><strong>CloudFire</strong> (107)</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--                <div class="col-lg-3">-->
<!--                    <h5 class="text-uppercase text-light mb-6"><i class="fas fa-long-arrow-alt-right"></i> Countries-->
<!--                    </h5>-->
<!--                    <ul class="list-unstyled pl-4">-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>United States</strong> (1605)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>France</strong> (569)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>Business & Corporate</strong> (419)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-4">-->
<!--                            <a href="#" class="tag-item"><strong>United Kingdom</strong> (672)</a>-->
<!--                        </li>-->
<!--                        <li class="mb-0">-->
<!--                            <a href="#" class="tag-item"><strong>Italy</strong> (484)</a>-->
<!--                        </li>-->
<!--                    </ul>-->
<!--                </div>-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->
<!--</div>-->
<!-- /.offcanvas - search -->

<!-- preloader -->
<div class="preloaderWrapper"></div>

<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>


<!--编辑按钮弹窗-->
<script>
    $(document).ready(function () {
        // 加载界面时弹窗先不显示
        $("#edit-popup").hide();

        $("#edit").click(function () {
            $("#edit-popup").fadeToggle();
        });

        $("#edit-popup .nav-item,.btn-outline-danger").click(function () {
            $("#edit-popup").fadeOut();
        });
    });
</script>


<!--将语句内容显示到编辑框里-->
<script>
    var tdElements = document.getElementsByClassName("emergencyPlan");
    var textarea = document.getElementById("textarea");

    textarea.value = tdElements[0].innerHTML.trim(); // 设置第一个<td>的内容为文本框的初始值

    textarea.addEventListener("input", function() {
        tdElements[0].innerHTML = textarea.value; // 将文本框的内容同步到第一个<td>中
    });
</script>

<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>

<!-- Chart.js -->
<script src="assets/plugins/chart/Chart.min.js" id="_chartJS_min"></script>
<script src="assets/plugins/chart/Chart.bundle.min.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-annotation.js"></script>
<script src="assets/plugins/chart/chartjs-plugin-labels.js"></script>

<!-- apexcharts -->
<script src="assets/plugins/apexcharts/apexcharts.min.js"></script>

<!-- RangeSlider -->
<script src="assets/plugins/rangeslider/rangeslider.min.js" id="_rangeJS_min"></script>

<!-- Moment -->
<script src="assets/plugins/lib/moment/moment.min.js"></script>

<!-- JQVMAP -->
<script src="assets/plugins/jqvmap/jquery.vmap.min.js" id="_JQVMAP"></script>
<script src="assets/plugins/jqvmap/maps/jquery.vmap.world.js"></script>

<!-- dateRangePicker -->
<script src="assets/plugins/daterangepicker/daterangepicker.js" id="_DateRangeJS_min"></script>

<!-- User JS -->
<script src="assets/js/scripts.js"></script>

<!-- Main JS -->
<script src="assets/js/main.js" id="_mainJS" data-plugins="load"></script>

<!-- Modules -->
<script src="assets/js/modules.js"></script>

</body>
</html>

<style>

    #edit-popup {
        width: 32%;
        position: fixed;
        top: 50%;
        left: 60%;
        transform: translate(-60%, -50%);
        z-index: 99;
        background-color: #091121;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    .p-collapsing-sidebar > .nav-link {
        width: 55px;
        padding: 0;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.15);
    }

    .nav-item-now {
        background: linear-gradient(36deg, #24C9F6, #2af270);
    }

    .nav-item-now .p-collapsing-title,
    .nav-item-now i {
        color: rgba(1, 0, 31, 0.9);
    }

    .main1 {
        width: 100%;
        height: 85vh;
        padding: 20px 10px 50px 50px;
    }

    hr {
        content: '';
        display: block;
        border: 0;
        height: 3px;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .button-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button-group {
        display: flex;
        gap: 10px; /* 按钮之间的间距 */
    }

    .more {
        background-color: transparent; /* 设置背景颜色为透明 */
        border: none; /* 去除边框 */
        padding: 0; /* 去除内边距 */
        font-size: 16px;
        cursor: pointer;
        color: #ceddf1;
        margin-left: 1rem;
        outline: none !important; /* 去除点击时的轮廓线 */
    }

    .more:hover {
        color: rgba(88, 205, 255, 0.6);
    }

    .more:focus {
        border: none; /* 去除边框 */
    }

    .pr-lg-6 {
        padding-right: 6rem !important;
    }

    .pr-4, .px-4 {
        padding-right: 1.5rem !important;
        width: 100%;
    }

    p {
        text-align: justify; /* 设置文本两端对齐 */
        word-wrap: break-word; /* 设置单词自动换行 */
    }

     .Avatar-rounded-circle {
         border-radius: 50% !important;
         height: 40px;
         width: 40px;
         text-align: center;
         border-style: solid;
         line-height: 35px;
     }

    .mb-0 {
        position: relative;
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .emergencyPlan {
        display: inline-block;
        vertical-align: middle;
    }

    .date {
        display: inline-block;
        float: right;
        color: #ceddf1 !important;
    }

    /*.date {*/
    /*    float: right;*/
    /*    position: relative;*/
    /*    right: 0;*/
    /*    color: #ceddf1 !important;*/
    /*}*/

</style>